﻿<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spa Land - Body & Massage Therapy HTML Template | Appointment</title>

<!-- Stylesheets -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/responsive.css" rel="stylesheet">

<!--Color Switcher Mockup-->
<link href="/css/color-switcher-design.css" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" href="/css/color-themes/default-theme.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
<link rel="icon" href="/images/favicon.png" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="/https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="/js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper">
 	
    <!-- Preloader -->
    <div class="preloader"></div>
 	
    <!-- Main Header-->
    <header class="main-header header-style-three">
    	
        <!--Header Top-->
    	<div th:insert="~{header :: #header-top}"></div>
        <!-- End Header Top -->

        <!-- Header Lower -->
        <div class="header-lower">
            <div class="auto-container">
               <div th:insert="~{header :: #main-box}"></div>
            </div>
        </div>
        <!-- End Header Lower -->
        
        <!--Sticky Header-->
        <div th:insert="~{header :: #header-sticky}"></div>
        <!--End Sticky Header-->
    </header>
    <!--End Main Header -->

 	<!--Page Title-->
    <section class="page-title" style="background-image:url(/images/background/11.jpg);">
        <div class="auto-container">
        	<div class="inner-container clearfix">
	            <h1>填写您的预约信息</h1>
	            <ul class="bread-crumb clearfix">
	                <li><a href="/page/index">首页</a></li>
	                <li>预约</li>
	            </ul>
        	</div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Appointment Page Section -->
    <section class="apppointment-page">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="form-column col-md-8 col-sm-12 col-xs-12">
                    <div class="appointment-form-two">
                        <div class="title"><h2>欢迎预约来店</h2></div>

                        <div th:unless="${#lists.isEmpty(appointment)}" >
                            <form method="post" onsubmit="return false" >
                                <div class="row clearfix">
                                    <input type="hidden" id="appId" th:value="${appointment.id}">
                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="text" name="username" id="nameEdit" placeholder="请填写您的姓名" th:value="${appointment.name}" required="">
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="email" name="email" id="emailEdit" placeholder="请填写您的邮箱" disabled="disabled"  th:value="${appointment.email}" required="">
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="tel" name="phone" id="phoneEdit" placeholder="请填写您的手机号"  th:value="${appointment.phone}" required="">
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="text" name="day" id="apTimeEdit"  th:value="${appointment.apTime}" placeholder="请填写到店时间 例如：2018-08-08">
                                    </div>

                                    <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                        <input type="text" name="time" id="atTimeEdit" placeholder="选择您的时间点"  th:value="${appointment.atTime}" class="timepicker">
                                    </div>



                                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                        <textarea name="message" id="aboutEdit"  th:text="${appointment.adbout}" placeholder="请填写您想了解的信息"></textarea>
                                    </div>

                                    <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                        <button class="theme-btn btn-style-four" type="submit" onclick="editAppointment()" name="submit-form">立即预定</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                       <div  th:if="${#lists.isEmpty(appointment)}" >
                           <form method="post" onsubmit="return false" action="appointment.html" >
                               <div class="row clearfix">


                                   <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                       <input type="text" name="name" id="name" placeholder="请填写您的姓名" required="">
                                   </div>

                                   <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                       <input type="email" name="email" id="email" placeholder="请填写您的邮箱" disabled="disabled" th:value="${user.email}" required="">
                                   </div>

                                   <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                       <input type="tel" name="phone" id="phone" placeholder="请填写您的手机号" required="">
                                   </div>

                                   <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                       <input type="text" name="apTime" id="apTime" placeholder="请填写到店时间 例如：2018-08-08">
                                   </div>

                                   <div class="col-md-6 col-sm-12 col-xs-12 form-group">
                                       <input type="text" name="atTime" id="atTime" placeholder="选择您的时间点" class="timepicker">
                                   </div>



                                   <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                       <textarea name="about" id="about" placeholder="请填写您想了解的信息"></textarea>
                                   </div>

                                   <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                                       <button class="theme-btn btn-style-four" onclick="submitAppointment()"  type="submit" name="submit-form">立即预定</button>
                                   </div>
                               </div>
                           </form>
                       </div>


                    </div>
                </div>

                <div class="info-column col-md-4 col-sm-12 col-xs-12">
                    <div class="info-box">
                        <div class="address">
                            <h3>我们的地址</h3>
                            <p>河南省商丘市商丘师范xxxxxxxxxxxxxxxxx</p>
                        </div>

                        <div class="inqury">
                            <h3>预定和咨询</h3>
                            <p>如果有任何疑问或者想了解的</p>
                            <span>致电 15136609940</span>
                        </div>

                        <div class="follow-us">
                            <h3>Follow Us</h3> 
                            <ul>
                                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </section>
    <!-- End Appointment Page Section -->

    <!-- Policy Section -->
    <section class="policy-section">

        <div class="content-box">
            <div class="auto-container">
                <div class="commitment">
                    <h2>我们的承诺</h2>
                    <div class="text">“平静地呼吸，呼吸压力。放松可以缓解你的痛苦。在我们充满压力且往往是负面的世界中，您放松优先的决定将帮助您导航，处理和减少压力“</div>
                </div>

                <div class="devider"><div class="separator"><span class="flaticon-flower"></span></div></div>

                <div class="row clearfix">
                    <div class="column col-md-6 col-sm-12 col-xs-12">
                        <h2>预订取消</h2>
                        <p>如果您需要重新安排或取消预约，请在治疗前至少72小时通知水疗中心。如果不这样做，将遗憾地导致50％的预订押金被没收。</p>
                    </div>

                    <div class="column col-md-6 col-sm-12 col-xs-12">
                        <h2>Payments</h2>
                        <p>The spa point of sale that makes everything easy, from taking and tracking payments to scheduling and rescheduling appointments. Sign up today!</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Policy Section -->

    <!-- Main Footer -->
    <div th:insert="~{footer :: #footer}"></div>
    <!-- End Main Footer -->

</div>    
<!--End pagewrapper-->

<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-gear"></i>
    </div>
    <div class="color-palate-head">
        <h6>选择一个你喜欢的主题</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="/css/color-themes/default-theme.css"></span>
            <span class="palate teal-color" data-theme-file="/css/color-themes/teal-theme.css"></span>
            <span class="palate navy-color" data-theme-file="/css/color-themes/navy-theme.css"></span>
            <span class="palate yellow-color" data-theme-file="/css/color-themes/yellow-theme.css"></span>
            <span class="palate blue-color" data-theme-file="/css/color-themes/blue-theme.css"></span>
            <span class="palate purple-color" data-theme-file="/css/color-themes/purple-theme.css"></span>
            <span class="palate olive-color" data-theme-file="/css/color-themes/olive-theme.css"></span>
            <span class="palate red-color" data-theme-file="/css/color-themes/red-theme.css"></span>
        </div>
    </div>

    <div class="palate-foo">
        <span>你可以很简单的改变主体颜色</span>
    </div>

</div>
<!-- /.End Of Color Palate -->

<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--End Revolution Slider-->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery.fancybox.js"></script>
<script src="/js/owl.js"></script>
<script src="/js/appear.js"></script>
<script src="/js/wow.js"></script>
<script src="/js/mixitup.js"></script>
<script src="/js/jquery.timepicker.min.js"></script>
<script src="/js/script.js"></script>
<!--Color Switcher-->
<script src="/js/color-settings.js"></script>
</body>
</html>
<script type="text/javascript">
function submitAppointment() {
    var name = $("#name").val();
    // alert(name);
    var email = $("#email").val();
    // alert(email);
    var phone = $("#phone").val();
    // alert(phone);
    var apTime = $("#apTime").val();
    // alert(apTime);
    var atTime = $("#atTime").val();
    // alert(atTime);
    var about = $("#about").val();
    // alert(about)
    $.ajax({
        url:'/appointment/appointment',
        dataType:'JSON',
        type:'POST',
        data:{
            name:name,
            email:email,
            phone:phone,
            apTime:apTime,
            atTime:atTime,
            adbout:about
        },
        success:function (result) {
            if  (result.code == 200) {
                alert("预定成功")
                return false;
            } else {
                alert("预定失败");
                return false;
            }
        }
    })
}

function editAppointment() {
    var appId = $("#appId").val();
    var name = $("#nameEdit").val();
    alert(name);
    var email = $("#emailEdit").val();
    alert(email);
    var phone = $("#phoneEdit").val();
    alert(phone);
    var apTime = $("#apTimeEdit").val();
    alert(apTime);
    var atTime = $("#atTimeEdit").val();
    alert(atTime);
    var about = $("#aboutEdit").val();
    alert(about)
    $.ajax({
        url:'/appointment/appointmentEdit',
        dataType:'JSON',
        type:'POST',
        data:{
            id:appId,
            name:name,
            email:email,
            phone:phone,
            apTime:apTime,
            atTime:atTime,
            adbout:about
        },
        success:function (result) {
            if  (result.code == 200) {
                alert("修改预定成功")
                return false;
            } else {
                alert("修改预定失败");
                return false;
            }
        }
    })
}

</script>
<script type="text/javascript">
    function searchService() {
        var question = $("#q").val().trim();
        window.location.href = '/gallery/searchGallery?question=' + question;
    }
</script>